<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->
<sp-basic-nav-tabs [spNavigationItems]="tabs" [activeLink]="'general'">
    <div fxLayout="column" class="page-container-padding">
        <div
            fxFlex="100"
            fxLayout="column"
            fxLayoutAlign="start start"
            *ngIf="formReady"
        >
            <form [formGroup]="parentForm" fxFlex="100" fxLayout="column">
                <sp-split-section title="Basic" subtitle="Basic settings">
                    <div
                        class="warning mb-10"
                        *ngIf="!generalConfig.configured"
                    >
                        These are default values - to use features such as email
                        you need to store these values once.
                    </div>
                    <div class="subsection-title">App Name</div>
                    <mat-form-field color="accent">
                        <input
                            formControlName="appName"
                            fxFlex
                            matInput
                            required
                            data-cy="general-config-app-name"
                        />
                    </mat-form-field>
                    <div class="subsection-title">Host and Port</div>
                    <div fxLayout="column" fxFlex="100">
                        <div fxLayout="row">
                            <div fxLayout="row" fxLayoutAlign="start center">
                                <mat-button-toggle-group
                                    name="protocol"
                                    aria-label="Protocol"
                                    formControlName="protocol"
                                >
                                    <mat-button-toggle value="http"
                                        >http
                                    </mat-button-toggle>
                                    <mat-button-toggle value="https"
                                        >https
                                    </mat-button-toggle>
                                </mat-button-toggle-group>
                            </div>
                            <mat-form-field color="accent" class="ml-10">
                                <mat-label>Host</mat-label>
                                <input
                                    formControlName="hostname"
                                    fxFlex
                                    matInput
                                    required
                                    data-cy="general-config-hostname"
                                />
                            </mat-form-field>
                            <mat-form-field color="accent" class="ml-10">
                                <mat-label>Port</mat-label>
                                <input
                                    formControlName="port"
                                    fxFlex
                                    matInput
                                    type="number"
                                    required
                                    data-cy="general-config-port"
                                />
                            </mat-form-field>
                        </div>
                    </div>
                </sp-split-section>
                <sp-split-section
                    title="Registration"
                    subtitle="Registration process"
                >
                    <div
                        class="warning mb-10"
                        *ngIf="
                            !generalConfig.configured ||
                            !mailConfig.emailConfigured
                        "
                    >
                        Self-registration requires valid mail server and basic
                        host settings.
                    </div>
                    <div
                        fxLayout="column"
                        *ngIf="
                            generalConfig.configured &&
                            mailConfig.emailConfigured
                        "
                    >
                        <mat-checkbox formControlName="allowSelfRegistration"
                            >Allow self-registration
                        </mat-checkbox>
                        <div
                            *ngIf="generalConfig.allowSelfRegistration"
                            class="mt-10 mb-10"
                        >
                            <h5>Default roles for new users</h5>
                            <mat-form-field color="accent" appearance="outline">
                                <mat-select
                                    formControlName="defaultUserRoles"
                                    [multiple]="true"
                                >
                                    <mat-option
                                        *ngFor="
                                            let role of availableRoles$ | async
                                        "
                                        [value]="role.elementId"
                                        >{{ role.label }}
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>
                        </div>
                        <mat-checkbox formControlName="allowPasswordRecovery"
                            >Allow self-service password recovery
                        </mat-checkbox>
                    </div>
                </sp-split-section>
                <sp-configuration-link-settings [parentForm]="parentForm">
                </sp-configuration-link-settings>
                <sp-split-section>
                    <div class="mt-10">
                        <button
                            mat-button
                            mat-raised-button
                            color="accent"
                            (click)="updateConfig()"
                            style="margin-right: 10px"
                            [disabled]="!parentForm.valid"
                            data-cy="sp-element-general-config-save"
                        >
                            <i class="material-icons">save</i
                            ><span>&nbsp;Save</span>
                        </button>
                    </div>
                </sp-split-section>
            </form>
        </div>
    </div>
</sp-basic-nav-tabs>
